<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>华猫商城</title>
		<style></style>
		<link href="../css/jquery.validator.css" rel="stylesheet">
		<link href="../css/common.css" rel="stylesheet">

		<link href="../plugin/userLib/css/user.css" rel="stylesheet">
		<link href="../plugin/userLib/css/userinfo.css" rel="stylesheet">
		<link href="../plugin/userLib/css/my_user.css" rel="stylesheet">
		<link href="../css/base.css" rel="stylesheet">
		<style>

		</style>
	</head>

	<body>
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--<div id="nav_menu"></div>-->
		<div class="ZZHT-wrap">
			<div class="ZZHT-header" style="border-bottom: 1px solid #ffffff;">
				<div class="ZZHT-shop-nav">
					<div class="ZZHT-nav-box">
						<a href="#">
							<li class="liselect ZZHT-lfloat ZZHT-nav-boxa">用户中心</li>
						</a>
						<div class="ZZHT-clear"></div>
					</div>
				</div>
				<div class="ZZHT-clear"></div>
			</div>
			<div class="ZZHT-main">
				<div id="user_left"></div>
				<div class="ZZHT-content">

					<div class="ZZHT-user-head"><b>用户信息</b></div>
					<div class="ZZHT-clear"></div>
					<div class="u-menu u-menus">
						<a href="javascript:void(0)" onclick="batchRead()">标记为已读</a> |
						<a href="javascript:void(0);" onclick="batchDel()">删除</a>
					</div>

					<div class="ZZHT-body">
						<div class="ZZHT-page-content">
							<table class="ZZHT-list ZZHT_msg">
								<thead>
									<tr>
										<th width="25">
											<div class="checkbox-box-s">
												<input class="ZZHT-checkbox-s" style="top:-8px;" onclick="javascript:ZZHT.checkChks(this,'.chk')" type="checkbox" id="all">
												<label for="all" style="top:-48px;"></label>
											</div>
										</th>
										<th width="45">状态</th>
										<th>消息</th>
										<th width="100">操作</th>
									</tr>
								</thead>
								<tbody id="msg_box">
									<tr style="border-bottom: 1px solid #e6e6e6;" v-for="(v,i) in tab">
										<td>
											<div class="checkbox-box-s"> <input type="checkbox" class="chk ZZHT-checkbox-s" :id='"chk-"+i' :value="v.id"><label class="mt-1" :for='"chk-"+i'></label> </div>
										</td>
										<td>
											<div :class='v.msgStatus==0?"newMsg":"readMsg"'></div>
										</td>
										<td>
											<div class="msg-content">
												<span v-if="v.msgType=='0'">【系统消息】</span>{{v.msgTitle}}
											</div>
										</td>
										<td>
											<a class="s-handle" href="#none" @click="showMsg(v.id)">查看</a>
											<a class="s-handle" href="#none" @click="delMsg(v.id)">删除</a> &nbsp;
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="12" align="center" style="padding:5px 0px 5px 0px;">
											<div id="ZZHT-page" class="ZZHT-page" style="padding-bottom:10px;"></div>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
						<div id="pager" style="text-align: center;"></div>
					</div>
				</div>
			</div>
			<div style="clear:both;"></div>
			<br>
		</div>
		<div id="ck3"></div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../plugin/layer/layer.js"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" src="../js/common_view.js"></script>
		<script type="text/javascript" src="../plugin/userLib/js/message.js"></script>
		<script type="text/javascript">
			var pages = 1; //总页数
			var pageNum = 1; //当前页

			var vm = new Vue({
				el: '#msg_box',
				data: {
					tab: [],
				},
				methods: {
					delMsg: function(id) {
						layer.confirm('确认删除？', function(index) {
							console.log(id);
							var data = [];
							data.push(id);
							remMsg(data, function() {
								window.location.reload();
							})
						})
					},
					showMsg: function(id) {
						console.log(id);
						var data = [];
						data.push(id);
						setRead(data, function() {
							location.href = 'msgDetail.html?msgId=' + id;
						});
					}
				}
			});

			$(function() {
				getList();
				initPage();
			})

			function getList() {

				$.ajax({ //获取用户信息 头像等
					type: "get",
					url: SURL + "messages/getMessage",
					async: false,
					data: {
						"receiveUserId": localStorage.userId,
						"pageNum": pageNum
					},
					dataType: 'json',
					success: function(res) {
						console.log(res);
						pages = res.page;
						if(res.messageCode == 200) {
							if(res.entity.length > 0) {
								vm.tab = res.entity;
							}
						} else {
							layer.msg(res.message);
						}
					}
				});

			}

			function setRead(data, back) { //设为已读
				$.ajax({
					type: "get",
					url: SURL + "messages/updateMessageStatus",
					data: {
						"ids": data,
						"msgStatus": 1
					},
					dataType: 'json',
					success: function(res) {
						return back && back();
					}
				});
			}

			function remMsg(data, back) { //删除
				$.ajax({
					type: "get",
					url: SURL + "messages/updateMessageStatus",
					data: {
						"ids": data,
						"dataFlag": 1
					},
					dataType: 'json',
					success: function(res) {
						return back && back();
					}
				});
			}
		</script>
	</body>

</html>